<template>
  <div>
    <a-form :form="form">
      <a-row :gutter="20">
        <a-col :md="8" :sm="24">
          <a-form-item label="人员姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-model="queryParam.personName" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="人员部别" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <unit-tree @getUnit="(val)=>queryParam.unitId=val"></unit-tree>
          </a-form-item>
        </a-col>
        <template v-if="advanced">
          <a-col :md="8" :sm="24">
            <a-form-item label="证件号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="queryParam.personCard" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="人员类别" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-model="queryParam.personType" :options="personTypeList">
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="军衔" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-model="queryParam.personMilitaryRank">
                <a-select-option :key="i" v-for="(military, i) in militaryList" :value="military">
                  {{ military }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="政治面貌" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-model="queryParam.personPoliticsStatus">
                <a-select-option :key="i" v-for="(politicsStatus, i) in politicsStatusList" :value="politicsStatus">
                  {{ politicsStatus }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="文化程度" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-model="queryParam.personEduLevel">
                <a-select-option :key="i" v-for="(eduLevel, i) in eduLevelList" :value="eduLevel">
                  {{ eduLevel }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </template>
        <a-col :md="8" :sm="24">
          <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
            <a-button type="primary" @click="handleSubmit">查询</a-button>
            <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            <a @click="toggleAdvanced" style="margin-left: 8px">
              {{ advanced ? '收起' : '展开' }}
              <a-icon :type="advanced ? 'up' : 'down'"/>
            </a>
          </span>
        </a-col>
      </a-row>
    </a-form>
    <div>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `已选择 ${selectedRowKeys.length} 条` }}
        </template>
      </span>
    </div>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
      :scroll="{ y: 240 }"
      :pagination="false"
    >
      <span slot="unitId" slot-scope="text">
        <a-tag color="#108ee9">{{ text | unitTextFilter }}</a-tag>
      </span>
    </a-table>
  </div>
</template>

<script>
  import { queryPerson } from '@/api/basic/soldier'
  import UnitTree from '@/components/PersonSelect/UnitTree'
  import { listUnit } from '@/api/basic/unit'
  import TagSelectOption from '../TagSelect/TagSelectOption'

  let that

  export default {
    name: 'PersonTable',
    props: {
      manoeuvreId: {
        type: String,
        default: ''
      }
    },
    components: {
      TagSelectOption,
      UnitTree
    },
    data () {
      return {
        meteData: [],
        personName: '',
        personId: null,
        label: '',
        selectedRowKeys: [],
        data: [],
        value: undefined,
        personIds: '',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        // 表头
        columns: [
          {
            title: '证件号',
            dataIndex: 'personCard',
            align: 'center',
            width: 130
          },
          {
            title: '人员姓名',
            dataIndex: 'personName',
            align: 'center'
          },
          {
            title: '单位',
            dataIndex: 'unitId',
            scopedSlots: { customRender: 'unitId' },
            align: 'center',
            sorter: true
          },
          {
            title: '军衔',
            dataIndex: 'personMilitaryRank',
            align: 'center'
          }
        ],
        form: this.$form.createForm(this),
        advanced: false,

        queryParam: {},
        militaryList: ['列兵', '上等兵', '下士', '中士', '上士', '四级军士长', '三级军士长', '二级军士长',
          '一级军士长', '少尉', '中尉', '上尉', '少校', '中校', '上校', '大校', '少将', '中将', '上将', '其它'],
        eduLevelList: ['初中', '高中', '中专', '大专', '本科', '硕士', '博士'],
        politicsStatusList: ['中共党员', '中共预备党员', '共青团员', '群众'],
        personTypeList: [
          { title: '军官队伍', value: '军官' },
          { title: '军士队伍', value: '军士' },
          { title: '兵', value: '兵' }
        ]
      }
    },
    computed: {
      hasSelected () {
        return this.selectedRowKeys.length > 0
      }
    },
    filters: {
      unitTextFilter (unitId) {
        let unitName = ''
        for (const unit of that.units) {
          if (parseInt(unit.unitId) === parseInt(unitId)) {
            unitName = unit.unitName
            break
          }
        }
        return unitName
      }
    },
    beforeCreate () {
      that = this
    },
    created () {
      listUnit()
        .then(res => {
          if (res.message !== 'error') {
            this.units = res.result
          } else {
            this.$message.error('操作失败！')
          }
        })
    },
    methods: {
      changeMeta (value) {
        this.personId = value
        queryPerson({ 'unitId': this.value, 'manoeuvreId': this.manoeuvreId, 'personId': this.personId }).then(res => {
          if (res.message !== 'error') {
            this.data = res.result
          } else {
            this.$message.error('操作失败! ')
          }
        })
        console.log(`selected ${value}`)
      },
      filterOption (input, option) {
        return option.componentOptions.propsData.label.indexOf(input) > -1
      },
      handleSubmit (value) {
        // this.queryParam
        this.meteData = []
        queryPerson(this.queryParam).then(res => {
          if (res.message !== 'error') {
            this.data = res.result
            if (this.data != null && this.data.length > 0) {
              for (let i = 0; i < this.data.length; i++) {
                this.meteData.push({ a: this.data[i].personName, c: this.data[i].personId })
              }
            }
          } else {
            this.$message.error('操作失败! ')
          }
        })
        this.selectedRowKeys = []
        console.log(this.selectedRowKeys.length)
      },
      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
        this.personIds = selectedRowKeys
        const list = []
        for (const index in this.personIds) {
          const personId = this.personIds[index]
          let person = {}
          for (const i in this.data) {
            if (this.data[i].personId === personId) {
              person = this.data[i]
              break
            }
          }
          list.push(person)
        }
        console.log(selectedRowKeys)
        this.$emit('getPerson', list)
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      }
    }
  }
</script>
